<!DOCTYPE html>
<html>

<head lang="zh-cn">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文件管理</title>
    <link rel="Shortcut Icon" href="images/logo.gif">
    <link rel="stylesheet" href="libs/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <style>
    .btn-toolbar {
        left: 30%;
    }
    
    .query {
        padding: 20px 0;
        vertical-align: middle;
        display: inline-block;
    }
    
    .category {
        width: 150px;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        text-align: center;
    }
    
    .category option {
        font-size: 16px;
    }
    
    .query-btn {
        margin-bottom: 4px;
    }
    </style>
</head>

<body>
    <div id="topFix">
        <strong>Admin</strong>
        <small>后台管理系统</small>
        <div class="text">
            <span>
                <i class="glyphicon glyphicon-user"></i> 你好，管理员A
            </span>
            <button class="btn btn-danger btn-sm logout">
                <i class="glyphicon glyphicon-off"></i> 退出
            </button>
        </div>
    </div>
    <div id="wrap">
        <!-- 侧边栏-->
        <div class="sidebar">
            <ul class="nav nav-pills nav-stacked" role="tablist">
                <li class="active">
                    <a href="#list1" data-toggle="collapse">课程管理</a>
                    <ol id="list1" class="nav nav-pills nav-stacked collapse in">
                        <li><a href="allCourses.html">全部课程</a></li>
                        <li><a href="addCourse.html">新建课程</a></li>
                    </ol>
                </li>
                <li class="active">
                    <a href="#list2" data-toggle="collapse">用户管理</a>
                    <ol id="list2" class="nav nav-pills nav-stacked collapse in">
                        <li><a href="members.html">成员信息</a></li>
                        <li><a href="newMember.html">添加用户</a></li>
                        <li><a href="departments.html">科室管理</a></li>
                    </ol>
                </li>
                <li class="active">
                    <a href="#list3" data-toggle="collapse">健康处方</a>
                    <ol id="list3" class="nav nav-pills nav-stacked collapse in">
                        <li class="bg-info"><a href="healthContent.html">文件管理</a></li>
                        <li><a href="healthUpload.html">上传文件</a></li>
                        <li><a href="healthManage.html">分类管理</a></li>
                    </ol>
                </li>
                <li class="active">
                    <a href="#list4" data-toggle="collapse" class="collapse">管理员设置</a>
                    <ol id="list4" class="nav nav-pills nav-stacked collapse in">
                        <li><a href="#">修改密码</a></li>
                    </ol>
                </li>
            </ul>
        </div>
        <!-- 正文 -->
        <div class="main">
            <!-- 路径导航 -->
            <ol class="breadcrumb">
                <li class="active">健康处方</li>
                <li class="active">文件管理</li>
            </ol>
            <div class="query">
                <div>
                    <label for="">选择种类：</label>
                    <select class="category category_1"></select>
                    <select class="category category_2"></select>
                    <button class="btn btn-default query-btn"><i class="glyphicon glyphicon-search"></i> 筛选</button>
                </div>
            </div>
            <table class="table table-striped table-bordered table-hover table-condensed">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>名称</th>
                        <th>种类</th>
                        <th>类型</th>
                        <th>发布日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>文件名称1</td>
                        <td>其他疾病</td>
                        <td>检查</td>
                        <td>2016/12/30 08:08:08</td>
                        <td>
                            <button class="btn btn-link btn-sm delete"><i class="glyphicon glyphicon-trash"></i> 删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>文件名称1</td>
                        <td>外科疾病</td>
                        <td>骨科疾病</td>
                        <td>2016/12/30 08:08:08</td>
                        <td>
                            <button class="btn btn-link btn-sm delete"><i class="glyphicon glyphicon-trash"></i> 删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>文件名称1</td>
                        <td>内科疾病</td>
                        <td>呼吸系统疾病</td>
                        <td>2016/12/30 08:08:08</td>
                        <td>
                            <button class="btn btn-link btn-sm delete"><i class="glyphicon glyphicon-trash"></i> 删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- 所有页码 -->
            <div class="btn-toolbar text-center">
                <div id="pagebar" class="btn-group btn-group-md"></div>
            </div>
        </div>
    </div>
    <script src="libs/jquery-2.1.4.js"></script>
    <script src="libs/bootstrap.min.js"></script>
    <script src="libs/jquery.pagination.js"></script>
    <script>
    $(function() {
        // 下拉菜单初始化
        function initOptions(selctor, arr) {
            var init = '<option value="0">-- 所有 --</option>';

            arr = arr || [];
            for (var i = 0; i < arr.length; i++) {
                init += '<option value="' + arr[i] + '">' + arr[i] + '</option>';
            }
            $(selctor).html(init);
        }

        var categories = {
            '内科疾病': ['呼吸系统疾病', '心血管疾病', '消化道疾病', '脑血管疾病', '精神类疾病', '肾脏疾病', '血液病', '传染性疾病', '内分泌疾病', '代谢性疾病'],
            '外科疾病': ['皮肤感染性疾病', '乳腺疾病', '心脏疾病', '胃肠疾病', '肝胆疾病', '泌尿系统疾病', '骨科疾病', '神经外科疾病', '胸部外科疾病', '周围血管疾病'],
            '妇儿疾病': ['孕期保健', '孕期合并症', '正常分娩', '异常分娩', '分娩并发症', '生殖系统炎症', '生殖系统肿瘤', '其他新生儿疾病', '营养障碍疾病', '呼吸道疾病', '心脏疾病', '血液病', '消化道疾病', '脑及神经性疾病', '感染性疾病', '儿童急症'],
            '其他疾病': ['康复', '检查', '眼科', '耳鼻喉']
        };

        //初始化下拉菜单
        (function() {
            var keys = [];
            for (var key in categories) {
                keys.push(key);
            }

            initOptions('.category_1', keys);
            initOptions('.category_2');
        })();

        // 初始化分页插件
        $('#pagebar').pagination({
            totalData: 2000, //总数据条数
            showData: 10, //每页数据条数
            current: 1, //当前页
            // jump:true,//跳转
            coping: true, //开启首页尾页
            homePage: '首页',
            endPage: '末页',
            prevContent: '上页',
            nextContent: '下页',
            callback: function(obj) { //当前页作为hash值
                window.location.href = window.location.pathname + '#' + obj.getCurrent();
            }
        });

        // 删除
        $('table').on('click', '.delete', function() {
            var nowIndex = $(".delete").index(this); //当前按钮的索引  

            if (window.confirm("是否删除(index=" + nowIndex + ")的数据")) {
                alert("删除成功！");
                location.reload();
            }
        });

        // 联动下拉菜单
        $('.category_1').on('change', function() {
            var selectedVal = $(this).children('option:selected').val();

            if (selectedVal === '0') { //0代表选择所有
                initOptions('.category_2');
            }

            for (var key in categories) {
                if (key === selectedVal) {
                    initOptions('.category_2',categories[key]);
                    break;
                }
            }
        });

        // 筛选
        $('.query-btn').click(function () {
            var category_1 = $('.category_1').val();//大类
            var category_2 = $('.category_2').val();//小类

            alert(category_1+';'+category_2)
        });
    })
    </script>
</body>

</html>
